<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统监控中心</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary: #4361ee;
            --warning: #f8961e;
            --danger: #ef233c;
            --success: #2ec4b6;
            --dark: #2b2d42;
        }

        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', system-ui, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .dashboard-header {
            background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 3rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .monitor-card {
            border-radius: 12px;
            margin-bottom: 2rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            background: white;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .monitor-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        }

        .card-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .cpu-card {
            border-top: 4px solid var(--primary);
        }

        .mem-card {
            border-top: 4px solid var(--success);
        }

        .disk-card {
            border-top: 4px solid var(--warning);
        }

        footer {
            background-color: var(--dark);
            color: white;
            padding: 1.5rem 0;
            margin-top: auto;
        }
    </style>
</head>
<body>
    <div class="dashboard-header">
        <div class="container text-center">
            <h1><i class="bi bi-speedometer2"></i> 系统监控中心</h1>
            <p class="lead mb-0">实时监控系统资源使用情况</p>
        </div>
    </div>

    <div class="container">
        <div class="row g-4">
            <!-- CPU监控卡片 -->
            <div class="col-md-4">
                <a href="http://127.0.0.1:8000/v1/cpu" class="text-decoration-none">
                    <div class="monitor-card cpu-card text-center p-4">
                        <div class="card-icon text-primary">
                            <i class="bi bi-cpu"></i>
                        </div>
                        <h3>CPU监控</h3>
                        <p class="text-muted">查看处理器使用率和核心负载</p>
                        <div class="mt-3">
                            <span class="badge bg-primary">实时数据</span>
                            <span class="badge bg-light text-dark ms-2">多核分析</span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- 内存监控卡片 -->
            <div class="col-md-4">
                <a href="http://127.0.0.1:8000/v1/mem" class="text-decoration-none">
                    <div class="monitor-card mem-card text-center p-4">
                        <div class="card-icon text-success">
                            <i class="bi bi-memory"></i>
                        </div>
                        <h3>内存监控</h3>
                        <p class="text-muted">监控内存使用情况和交换空间</p>
                        <div class="mt-3">
                            <span class="badge bg-success">使用率</span>
                            <span class="badge bg-light text-dark ms-2">趋势分析</span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- 磁盘监控卡片 -->
            <div class="col-md-4">
                <a href="http://127.0.0.1:8000/v1/disk" class="text-decoration-none">
                    <div class="monitor-card disk-card text-center p-4">
                        <div class="card-icon text-warning">
                            <i class="bi bi-hdd"></i>
                        </div>
                        <h3>磁盘监控</h3>
                        <p class="text-muted">查看磁盘空间和IO性能</p>
                        <div class="mt-3">
                            <span class="badge bg-warning text-dark">容量监控</span>
                            <span class="badge bg-light text-dark ms-2">读写速度</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <footer class="text-center">
        <div class="container">
            <p class="mb-0">系统监控中心 &copy; 2023 | 版本 1.0.0</p>
            <p class="small text-muted mb-0">最后更新: <span id="lastUpdate"></span></p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 显示最后更新时间
        document.getElementById('lastUpdate').textContent = new Date().toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        });
    </script>
</body>
</html>